<template>
  <div>
    <div>
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 上 -->
          <slot name="before">
            <el-form-item label="店铺ID/昵称" label-width="100px">
              <el-input
                v-model="formInline.controlNo"
                placeholder="店铺ID/昵称"
              />
            </el-form-item>
          </slot>
          <!-- 中 -->
          <slot name="middle">
            <el-form-item label="推广收益筛选">
              <el-date-picker
                v-model="formInline.withdrawaltime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </slot>
          <el-form-item style="margin-left: 40px">
            <el-button
              size="small"
              class="search"
              @click="searchResult"
            >查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="earnings">
      <span>推广人数量：1000人</span><span>推广店铺总数 100</span>
    </div>
    <template>
      <el-card class="hr-block">
        <el-table
          :data="list"
          :default-sort="{ prop: 'date', order: 'descending' }"
          max-height="500"
        >
          <el-table-column label="店铺ID" prop="type" />
          <el-table-column label="店铺名称" prop="controlNo" />
          <el-table-column label="店铺地址" prop="address" />
          <el-table-column label="推广开店日期" prop=" withdrawaltime">
            <template slot-scope="scope">
              <span>{{ scope.row.withdrawaltime | formatDate }}</span>
            </template>
          </el-table-column>

          <el-table-column label="推广收益" prop="money">
            <template slot-scope="{ row }">
              <span>{{ row.money + ' 元' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="block">
          <el-row
            type="flex"
            align="middle"
            justify="center"
            style="height: 60px"
          >
            <el-pagination
              background
              :page-sizes="[2, 4, 8, 10]"
              :current-page.sync="page.page"
              :page-size="page.pageSize"
              layout="total, prev, pager, next"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        controlNo: '',
        withdrawaltime: ''
      },
      page: {
        page: 1, // 数据总数
        total: 0, // 当前在第几页
        pageSize: 4, // 每页显示多少条
        name: ''
      },
      list: [
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        },
        {
          type: '1574888',
          controlNo: '岳麓区.保利林语店',
          address: '1574888',
          withdrawaltime: '1000',
          money: 111200
        }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    search() {},
    resetting() {},
    searchResult() {},
    reset() {},
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style scoped lang="scss">
.search {
  background-color: #f90;
  color: #fff;
}

.el-card {
  margin: 10px 20px 0;
}

::v-deep .el-form {
  .el-form-item {
    margin-bottom: 5px;
    .el-form-item__label {
      color: #515a6e;
      font-weight: normal;
      font-size: 13px;
      line-height: 32px;
    }
    .el-form-item__content {
      line-height: 32px;
      .el-input__inner {
        font-size: 13px;
        line-height: 32px;
        height: 32px;
      }
    }
  }
}

.earnings {
  padding: 10px;
  span {
    margin: 20px;
  }
}
</style>
